<template>
  <div class="yanqing">
    <!--      头部-->
    <ul class="nav">
      <li>
        <router-link to="/youshengshu">< 有声书</router-link>
      </li>
      <li>
        <router-link to="/search">
          <p class="search" >
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-sousuo"></use>
            </svg>
            搜索
          </p>
        </router-link>
      </li>
      <li><button>打开APP</button></li>
    </ul>
    <!--      导航栏-->
    <div class="navtab">
      <ul class="nav_tab">
        <li v-for="(item,index) in navlist" v-on:click="change(index)" v-bind:class="{current:index==msg}">
          <router-link to="/youshengshu">{{item.title}}</router-link>
        </li>
      </ul>
    </div>

    <div class="yanqing_choose">
      <div v-for="(item,index) in thislist" @click="changeborder(index)">
        <router-link :to="thislist[index].path"  :class="{current:index==num}">
          {{item.name}}
        </router-link>
      </div>
    </div>

<!--    如果没有这个的话，只有导航栏没有内容，但是有这个的话router-link的链接跳转有问题
现在的问题是：一开始出来了，当num值有变化的时候，ul要隐藏
-->
<!--    <ul class="cont_tab" id="cont" v-if="num==0">-->
<!--      <li v-for="(item,index) in zonghelist">-->
<!--        <div class="cont">-->
<!--          <div class="con_left">-->
<!--            <img :src="item.images" alt="">-->
<!--          </div>-->
<!--          <div class="con_right">-->
<!--            <h2>{{item.title}}</h2>-->
<!--            <span>{{item.des}}</span>-->
<!--            <p>-->
<!--                <span class="span_left">-->
<!--                  <svg class="icon" aria-hidden="true">-->
<!--                    <use xlink:href="#icon-sound-wave"></use>-->
<!--                  </svg>-->
<!--                  {{item.comment}}-->
<!--                </span>-->
<!--              <span class="span_right">-->
<!--                  <svg class="icon" aria-hidden="true">-->
<!--                    <use xlink:href="#icon-listen"></use>-->
<!--                  </svg>-->
<!--                  {{item.listen}}-->
<!--                </span>-->
<!--            </p>-->
<!--          </div>-->
<!--        </div>-->
<!--      </li>-->
<!--    </ul>-->

    <router-view></router-view>
  </div>
</template>

<script>
    export default {
      name: "yanqing",
      data(){
        return{
          msg:0,
          num:0,
          navlist:[],
          zonghelist:[],
          thislist:[
            {
              name:'综合排序',
              num:0,
              path:'/zonghe'
            },
            {
              name:'最多播放',
              num:1,
              path:'/mostplay'
            },
            {
              name:'最多更新',
              num:2,
              path:'/mostnew'
            }
          ]
        }
      },
      watch:{
        // 数据名(){} 要监听谁就写谁的名字
        num() {
          console.log('num发生变化了');
          // cont.addClass('contshow');
        }
      },
      methods:{
        change(a){
          this.msg=a;
        },
        handleClose(){
          console.log(111);
          this.$router.push('/index');
        },
        changeborder(a){
          // var number = a.target.innerHTML;
          // this.num=number;
          // console.log(a.target.innerHTML);
          // console.log(this.num);
          this.num=a;
          console.log(this.num);
        }
      },
      mounted() {
        var _this=this;
        this.$http.get('./data/zonghe.json')
          .then((response)=>{
            //成功之后的
            this.navlist=response.data.navlist;
            this.zonghelist=response.data.zonghelist;
            // console.log(zonghelist);
          })
          .catch(function (err) {
            //失败的
            console.log(err);
          })
          .then(function () {
            //总会执行的
            //always executed
          })
      }
    }
</script>

<style scoped>
  /*.contshow{*/
  /*  display: none;*/
  /*}*/
  .yanqing .nav li:nth-of-type(1) a{
    color: #333333;
    font-weight: normal;
  }
  /*内容*/
  .cont_tab{
    /*background: purple;*/
    padding: 0 20px;
  }
  .cont_tab>li{
    /*margin-top: 30px;*/
  }
  .cont_tab>li:nth-of-type(1){
    margin-top: 0;
  }
  /*li的内容*/
  .cont{
    display: flex;
    /*background-color: palevioletred;*/
    margin-bottom: 10px;
    /*margin-top: 20px;*/
  }
  .con_left{
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*background-color: #fa2800;*/
  }
  .con_left img{
    width: 100%;
    border-radius: 4px;
  }
  .con_right{
    /*border:1px solid blue;*/
    width: 66%;
    padding: 10px 0px 10px 10px
  }
  .con_right>h2{
    color: #333;
    font-size: 16px;
    line-height: 1.38;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .con_right>span{
    font-size: 13px;
    color: #999;
    line-height: 1.38;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }
  .con_right>p{
    margin: 10px 0;
  }
  .con_right>p>span{
    font-size: 12px;
    color: #999;
  }
  .span_right{
    margin-left: 20px;
  }
  /*言情*/
  .yanqing .nav{
  padding: 10px 20px 0 10px;
}
.yanqing .nav li:nth-of-type(1){
  color: #333333;
  font-weight: normal;
  font-size: 18px;
  letter-spacing: -0.05em;
}
.yanqing_choose{
  display: flex;
  padding: 15px 10px;
}
.yanqing_choose a{
  font-size: 14px;
  padding: 4px 12px;
  margin: 4px;
  color: #a3a3ac;
}
.yanqing_choose .current{
  border: 1px solid rebeccapurple;
  color: #f86442;
  border-radius: 15px;
  border: 1px solid rgba(254,121,89,.5);
}

</style>
